<!--
    Va-Select 《数据字典的选择框》

    使用方式：
        <va-select v-model="model" :keyData="keyData"/>

    1.keyData:数据字典的唯一标识
    规范：返回的数据要符合(JSON中对应的字段必须：label/value/disabled,不能其他)
      [
        {label:'显示1',value:'值1',disabled:false},
        {label:'显示2',value:'值2',disabled:false},
        {label:'显示3',value:'值3',disabled:false},
        ...
      ]
    2.v-model 数据的双向绑定,绑定父组件中的字段
    3.disabled 是否禁用


-->
<template>
    <va-load :dictKey="dictKey"
             :remoteLoading="remoteLoading"
             v-model="modelValue2"

    >
        <template #default="{  options }">
            <el-select v-model="modelValue2"
                       :multiple="multiple"
                       :filterable="filterable"
                       :placeholder="placeholder"
                       :size="size"
                       :clearable="clearable"
                       :multiple-limit="multipleLimit"
                       :loading="loading"
                       :loading-text="loadingText"
                       :disabled="disabled"
                       style="float: left"
                       @change="change"
            >
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item[label]"
                        :value="value?item[value]:item"
                        :disabled="item.disabled"
                >
                    <slot name="left" :leftValue="item"></slot>
                    <slot name="right" :rightValue="item"></slot>
                </el-option>
            </el-select>

            <div style="float: left;color: #909399;margin-left: 10px;"
                 v-if="multipleLimit!=0 && multipleLimit!=null">
                (*最多可选择{{multipleLimit}}项)
            </div>
        </template>
    </va-load>
</template>

<script>
    import {ref,watch, defineComponent} from 'vue'
    import {commonProp,eventFun} from "./common"

    export default defineComponent({
        name: "Va-Select",
        props: {
            /**
             * 加载公共prop
             */
            ...commonProp,
            placeholder: {
                type: String,
                default: '请选择数据选项'
            },
            multipleLimit: {
                type: Number,
                default: 0
            },
            loadingText: {
                type: String,
                default: "正在加载中"
            },
            label: {
                type: String,
                default: "label"
            },
            value: {
                type: String,
                default: "value"
            },

        },
        setup(props,context) {

            //data
            //选项值
            const modelValue2 = ref(props.modelValue)

            //watch
            watch(() => props.modelValue, (val) => {
                modelValue2.value=val
            })

            return {
                //data
                modelValue2,
                //fun
                ...eventFun(props,context)
            }
        }
    })
</script>

<style scoped>

</style>